<template>
  <div class="mod-user">
    <el-form :model="q" label-width="110px" @submit.native.prevent>
      <el-card>
        <el-row style="padding-right: 2%">
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="登录账号">
              <el-input size="small" v-model="q.queryUsername" placeholder="-请输入登录账号-" clearable @change="queryData()"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="姓名">
              <el-input size="small" v-model="q.queryName" placeholder="-请输入姓名-" clearable @change="queryData()"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="手机号码">
              <el-input size="small" v-model="q.queryMobile" placeholder="-请输入手机号码-" clearable @change="queryData()" maxlength="11"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="拥有角色">
              <el-select style="width: 100%" size="small" v-model="q.queryRoleId" clearable @change="queryData()" placeholder="-请选择拥有角色-">
                <el-option v-for="item in roleList" :label="item.roleName" :value="item.id" :key="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-button size="mini" icon="el-icon-plus" type="primary" v-if="isAuth('sysUser:save')" @click="editHandle()">新增</el-button>
          <el-button size="mini" icon="el-icon-delete" type="danger" v-if="isAuth('sysUser:delete')" @click="deleteData('/sysUser/delete')" :disabled="dataSelect.length <= 0">删除</el-button>
          <span style="float:right; display: flex; align-items: center">
            <table-dynamic-column :checkedColumns="checkedColumns" :checkBoxGroup="checkBoxGroup" @dynamicColumn="(val) => dynamicColumn(val)"/>
            <el-button size="mini" icon="el-icon-download" type="primary" @click="excelDownload('/sysUser/export', q)">导出</el-button>
            <el-button size="mini" icon="el-icon-search" @click="queryData()">查询</el-button>
				  </span>
        </el-row>
      </el-card>
    </el-form>

    <el-table :key="reload" :data="dataList" border v-loading="dataLoading" style="width: 100%;"
              @sort-change="(val) => orderSort(val)" @selection-change="(val) => selectionChange(val)">
      <el-table-column type="selection" width="40"/>
      <el-table-column label="序号" align="center" width="50" header-align="center">
        <template slot-scope="scope">{{(q.page - 1) * q.limit + scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column v-if="colData[0].isTrue" align="center" prop="icon" label="头像">
        <template slot-scope="scope" v-if="scope.row.icon">
          <el-image class="etc-image" :preview-src-list="scope.row.icon.split(',')" :src="scope.row.icon.split(',')[0]" lazy />
        </template>
      </el-table-column>
      <el-table-column v-if="colData[1].isTrue" align="center" prop="username" label="登录账号"/>
      <el-table-column v-if="colData[2].isTrue" align="center" prop="name" label="姓名"/>
      <el-table-column v-if="colData[3].isTrue" align="center" prop="mobile" label="手机号码"/>
      <el-table-column v-if="colData[4].isTrue" align="center" prop="email" label="邮箱">
        <template slot="header" slot-scope="scope">
          <table-header-search :model="q" modelKey="queryEmail" :label="scope.column.label" @query="queryData()"/>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[5].isTrue" align="center" prop="status" label="状态">
        <template slot="header" slot-scope="scope">
          <table-header-search :model="q" modelKey="status" :label="scope.column.label" :stOptions="statusList" stItemLabel="names" @query="queryData()"/>
        </template>
        <template slot-scope="scope">
          <p>
            <el-switch :value="scope.row.status === 1" v-if="isAuth('sysUser:update') && scope.row.kind !== 1"
                       @change="switchValue('/sysUser/status', scope.row.id, 'status', scope.row.status)"/>
            <el-switch :value="scope.row.status === 1" v-else disabled />
          </p>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[6].isTrue" align="center" prop="roleNames" label="拥有角色"/>
      <el-table-column v-if="colData[7].isTrue" align="center" prop="createTime" label="创建时间"/>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-if="isAuth('sysUser:update')" @click="editHandle(scope.row.id)">修改</el-button>
          <el-button size="mini" type="text" v-if="isAuth('sysUser:delete') && scope.row.kind !== 1" @click="deleteData('/sysUser/delete', scope.row.id)">删除</el-button>
          <el-button size="mini" type="text" v-if="isAuth('sysUser:delete') && scope.row.kind === 1" disabled>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="(val) => sizeChange(val)" @current-change="(val) => currentChange(val)"
       :current-page="q.page" :page-sizes="[10, 20, 30, 50, 100, 300, 500]" :page-size="q.limit"
       layout="total, sizes, prev, pager, next, jumper" :total="q.totalCount">
    </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <edit v-if="editVisible" ref="edit" @refreshDataList="reloadData()"/>
  </div>
</template>

<script>
  import Edit from './sysUserEdit'
  import TableHeaderSearch from '@/components/table-header-search'
  import TableDynamicColumn from '@/components/table-dynamic-column'
  export default {
    data () {
      return {
        q: this.getPage(),
        url: '/sysUser/list',
        dataList: [],
        dataLoading: false,
        dataSelect: [],
        roleList: [],
        editVisible: false,
        statusList: [
          {id: 0, names: '禁用'},
          {id: 1, names: '正常'}
        ],
        reload: Math.random(),
        colData: this.getColData('头像', '登录账号', '姓名', '手机号码', '邮箱', '状态', '拥有角色', '创建时间'),
        checkBoxGroup: [],  // 多选框的列表，列出表格的每一列
        checkedColumns: []  // 当前选中的多选框，代表当前展示的列
      }
    },
    created () {
      this.initDynamicColumn()
      this.httpGet('/sysRole/select').then(res => {
        this.roleList = res.data
      })
    },
    components: {
      Edit,
      TableHeaderSearch,
      TableDynamicColumn
    },
    activated () {
      this.getTableData(this.url, this.q)
    },
    methods: {
    }
  }
</script>
